<html> 
    <head> 
        <title>Getting Started Example</title> 
        <link rel="stylesheet" type="text/css" 
              href="/extjs/resources/css/ext-all.css" /> 
        <script src="/extjs/adapter/ext/ext-base.js"></script> 
        <script src="/extjs/ext-all-debug.js"></script>
        <script src="other.js"></script>
        <script>
            if (Ext.BLANK_IMAGE_URL.substr(0, 5) != 'data:') { 
                Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif'; 
            }      
                       
            var fm = Ext.form;
            
            var province = Ext.data.Record.create([
                'id',
                'name'
            ]);
            
            var writer = new Ext.data.JsonWriter({
                encode: false,
                listful: true,
                writeAllFields: true
            });
	 
            var reader = new Ext.data.JsonReader({                
                successProperty: 'success',
                idProperty: 'id',
                root: 'rows'                
            }, province);
            
            var proxy = new Ext.data.HttpProxy({
                api: {
                    read: 'controller.php?proses=provinces',                   
                    update: 'controller.php?proses=update_prov',                    
                    destroy:'controller.php?proses=delete_prov'
                },
                headers: { 'Content-Type': 'application/json; charset=UTF-8'}
            });
            
            var store = new Ext.data.Store({                
                id : 'user',
                proxy :proxy,
                reader : reader,
                writer : writer,
                autoSave : false,
                autoLoad : true
            });
            
            var cm = new Ext.grid.ColumnModel({
                defaultSortable: false,
                columns:[{
                        width : 50,
                        header: 'Id', 
                        dataIndex: 'id'
                    },{
                        header: 'Name',
                        dataIndex: 'name',
                        width: 150,
                        editor: new fm.TextField({
                            allowBlank: false
                        })
                    }]
            });
            
            var createGrid = function(){
                var mygrid = new Ext.grid.EditorGridPanel({
                    renderTo : document.body,
                    store: store,                  
                    width: 400,
                    height: 300,    
                    title: 'Editable Grid',
                    frame: true,                
                    clicksToEdit: 1,
                    cm : cm,                    
                    //listeners:{ 'afteredit': function(e){
                    //Ext.Msg.alert('Pesan',e.value);                              
                    //        store.save();                            
                    //}}
                    tbar : [{
                            text: 'Update Record',
                            handler: function () {                               
                                store.save();                                
                            }
                        }]
                });
            }
            
            Ext.onReady(createGrid);
        </script>
    </head> 
    <body> 
        <!-- Nothing in the body --> 
    </body> 
</html>